<template>
  <button @click="goBack"><</button>
      <div class="top">
        <h2>注册</h2>
      </div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
</template>

<script>
import { showSuccessToast } from 'vant';
import { regRequest } from '../../api/userApi'
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit() {
      console.log('点击了按钮');
      regRequest(this.username, this.password).then(res => {
        console.log(res.data);
        let { code, message } = res.data
        if (code == '200') {
          showSuccessToast(message)
          this.$router.push('/login')

        } else {
          showFailToast(message)
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.top {
  margin-bottom: 20px;
  text-align: center;
}
</style>